<template>
  <div class="excel-container">
    <div class="app-container">
      <el-card>
        <!-- 使用上传excel组件 -->
        <upload-excel
          :before-upload="handleBeforeUpload"
          :on-success="handleUploadSuccess"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getJsDateFromExcel } from 'excel-date-to-js'
// console.log(getExcelDateFromJs)
import dayjs from 'dayjs'
import { addEmployeeBatchAPI } from '@/api/employees'
export default {
  name: 'Excel',
  methods: {
    // 上传前的校验
    handleBeforeUpload(file) {
      // file： 选择/拖拽的excel文件头像
      // 可以校验文件大小，通过了返回true：否则返回false
      // 并且只有在返回true条件下才会触发上传成功
      // console.log(file)
      // return true
      // file.size: 文件大小，单位是字节（Byte）
      const isMt5M = file.size / 1024 / 1024 > 5

      if (isMt5M) {
        this.$message.warning('文件大小不超过5M')
        // 不通过
        return false
      }
      return true
    },
    // 上传成功了
    async handleUploadSuccess({ header, results }) {
      // console.log('sucess')
      // header： excel的表头字符串数组
      // console.log(header)

      // resulets： excel的表体对象数组
      // console.log(results)
      const zh2EnKey = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }

      const employeeList = results.map((item) => {
        const obj = {}
        Object.keys(item).forEach((key) => {
          const enkey = zh2EnKey[key]
          // 给obj添加英文key
          // 如果当前英文key是 timeOfEntry 或correctionTime，
          // 需要对Excel时间戳做转换
          if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
            obj[enkey] = dayjs(getJsDateFromExcel(item[key])).format(
              'YYYY-MM-DD'
            )
          } else {
            obj[enkey] = item[key]
          }
        })
        return obj
      })
      // console.log(employeeList)

      await addEmployeeBatchAPI(employeeList)

      this.$message.success('批量新增成功')
      this.$router.go(-1)
    }
  }
}
</script>

<style>
</style>
